<template>
    <div class="container">
        <div class="center">
            <!-- 首页导航 -->
            <ul class="navigationBar">
                <li class="active" v-for="item in videoListTitle" :key="item.id">{{ item.name }}</li>
            </ul>
            <!-- 视频播放区 -->
            <div class="videoContainer">
                <div class="conten" v-for="item in musicVideoFirst" :key="item.id">
                    <div class="contenPlay">
                        <!-- 遮罩层 -->
                        <div class="maskLayer">
                            <p class="iconfont icon-tubiaozhizuomoban"></p>
                        </div>
                        <img class="contenImg" :src="item.cover" />
                        <!-- 暂停图标,播放量和播放时长-->
                        <div class="details">
                            <p class="iconfont icon-zanting">
                                <i>1920</i>
                            </p>
                            <span class>04:07</span>
                        </div>
                    </div>
                    <span class="contenTitle">{{ item.name }}</span>
                    <p class="contenName">{{ item.artistName }}</p>
                </div>
            </div>
        </div>
        <!-- Pagination 分页 -->
        <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination>
    </div>
</template>

<script>
import { getVideoList } from "../../api/musicVideo";
import { getMusicVideoInfo } from "../../api/musicVideo";
import { getVideoUrl } from "../../api/musicVideo";
import { getMusicVideoFirst } from "../../api/musicVideo";

export default {
    name: "MusicVideo",
    data() {
        return {
            videoListTitle: [], //首页导航
            musicVideoFirst: [], //歌名图片标题数据
        };
    },
    async mounted() {
        const res = await getVideoList();
        var videoListTitle = res.data.splice(5);
        console.log(videoListTitle);
        this.videoListTitle = videoListTitle;

        const res1 = await getMusicVideoInfo("1838820F4DEEB48B040E4E5374481C99");
        console.log(res1);
        //console.log(res1.data.coverUrl);

        const res2 = await getVideoUrl("1838820F4DEEB48B040E4E5374481C99");
        console.log(res2);

        //点击按钮导航栏切换数据
        const res3 = await getMusicVideoFirst(20);
        console.log(res3);
        this.musicVideoFirst = res3.data;
    },
};
</script>

<style>
/* 屏幕宽度小于1200px 中间内容为940px 视频部分为宽度为178px */
@media (max-width: 1200px) {
    .center {
        width: 940px;
    }

    .conten,
    .contenPlay,
    .contenImg,
    .details,
    .contenTitle,
    .contenName {
        width: 178px;
    }
}

* {
    margin: 0;
    padding: 0;
}

html body {
    width: 100%;
}

.container {
    width: 100%;
    min-width: 1200px;
    max-width: 1640px;
}

.center {
    margin: 0 auto;
    width: 1032px;
    /* border: 1px solid pink; */
}

.navigationBar {
    display: flex;
    padding-bottom: 50px;
    list-style-type: none;
}

/* 导航条选中时的状态 */
.navigationBar .active {
    background: #ffe443;
    font-weight: 700;
}

.navigationBar > li {
    width: 85px;
    height: 28px;
    margin-right: 20px;
    line-height: 28px;
    text-align: center;
    font-size: 14px;
    font-weight: 100;
    border-radius: 20px;
    cursor: pointer;
}

/* 视频区 */
.videoContainer {
    width: 1032px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.conten {
    width: 198px;
    height: 192px;
    padding-bottom: 10px;
    /* border: 1px solid yellow; */
}

.conten .contenPlay {
    width: 100%;
    height: 113px;
    position: relative;
    overflow: hidden;
}

/* 图片上的遮罩层 让遮罩层的层级高一点否者会显示不出来 */
.conten .maskLayer {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

/* hover.contenPlay时图片上出现遮罩层 */
.conten .contenPlay:hover .maskLayer {
    background: rgba(255, 255, 255, 0.5);
}

/* 遮罩层上的图标 */
.conten .maskLayer p {
    font-size: 40px;
    display: none;
}

.conten .maskLayer:hover p {
    color: white;
    display: block;
}

.conten .contenPlay .contenImg {
    width: 100%;
    height: 100%;
    transition: transform 1s;
}

/* 鼠标悬浮时图片放大1.1倍 */
.conten .contenPlay:hover .contenImg {
    width: 100%;
    height: 100%;
    transform: scale(1.1);
}

.conten .contenPlay .details {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: white;
    /* border: 1px solid white; */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conten .contenPlay .details p {
    padding-left: 6px;
    font-size: 14px;
}

.conten .contenPlay .details span {
    padding-right: 6px;
}

.conten .contenTitle {
    display: block;
    font-size: 18px;
    width: 198px;
    height: 50px;
    line-height: 50px;
    /* 单行显示省略号 */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.conten .contenTitle:hover {
    color: green;
    font-weight: 700px;
    /* text-shadow: pink 3px 4px 5px; */
}

.conten .contenName {
    color: #999;
    font-weight: 300;
    font-size: 14px;
}

.conten .contenName:hover {
    color: pink;
}

/* 视频区结束 */
/* 分页区 */
.el-pagination {
    display: flex;
    justify-content: center;
}

/*  */
/* .notCursor currentPage:active {
		background: #ffdf1f;
	} */
</style>
